import type { FC } from 'react';
import React from 'react';
import { Layout } from 'antd';
import { Input, Space } from 'antd';
import { Form, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
const { Search } = Input;
const { Header, Footer, Content } = Layout;
import styles from './login.less';
import { connect } from 'umi';
const Login = ({ query, createUser }) => {
  const onSearch = (value: any) => console.log(value);
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    createUser(values);
  };
  return (
    <Layout>
      <Header className={styles.header}>Header</Header>
      <Content className={styles.content}>
        <div className={styles.lpcontent}>
          <div className={styles.slogon}></div>
          <div className={styles.clearfix}>
            {/* <div className={styles.lpleft}>
              <Search
                placeholder="input search text"
                allowClear
                enterButton="Search"
                size="large"
                onSearch={onSearch}
              />
            </div> */}
            <div className={styles.lplogin}>
              <p className={styles['lp-login-title']}>一键注册</p>
              <Form
                name="normal_login"
                className="login-form"
                initialValues={{ remember: true }}
                onFinish={onFinish}
              >
                <Form.Item
                  name="name"
                  rules={[
                    { required: true, message: 'Please input your Username!' },
                  ]}
                >
                  <Input
                    prefix={<UserOutlined className="site-form-item-icon" />}
                    placeholder="Username"
                  />
                </Form.Item>
                <Form.Item
                  name="pwd"
                  rules={[
                    { required: true, message: 'Please input your Password!' },
                  ]}
                >
                  <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="Password"
                  />
                </Form.Item>
                <Form.Item>
                  <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>Remember me</Checkbox>
                  </Form.Item>

                  <a className="login-form-forgot" href="">
                    Forgot password
                  </a>
                </Form.Item>

                <Form.Item>
                  <Button
                    type="primary"
                    htmlType="submit"
                    className="login-form-button"
                    onClick={() => {
                      query();
                    }}
                  >
                    Log in
                  </Button>
                  Or <a href="">register now!</a>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
      </Content>
      <Footer className={styles.footer}>Footer</Footer>
    </Layout>
  );
};
export default connect(
  (store: any) => {
    const { user } = store;
    const { data } = user;
    return { data };
  },
  (dispatch: Function) => ({
    get: () => {
      dispatch({
        type: 'user/get',
      });
    },
    query: () => {
      dispatch({
        type: 'user/query',
      });
    },
    createUser: (payload: Function) => {
      dispatch({
        type: 'user/createUser',
        payload,
      });
    },
  }),
)(Login);
